<template>
  <div>
    <div class="app-page">
      <!-- <div class="content"> -->
      <table-search
        :search-form="queryFormItem"
        :on-submit="handleQuery"
        :on-reset="handleQuery"
      >
        <div slot="new-add-button" style="line-height:45px;">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="handleAdd"
          >
            添加
          </el-button>
        </div>
      </table-search>
      <!-- </div> -->
    </div>
    <el-card class="table">
      <div class="theader">
        <div class="itembox">
          <span>顺畅</span>
          <span class="green">{{ dataList.smooth }}</span>
        </div>
        <div class="itembox">
          <span>一般</span>
          <span class="orange">{{ dataList.common }}</span>
        </div>
        <div class="itembox">
          <span>缓慢</span>
          <span class="redone">{{ dataList.slow }}</span>
        </div>
        <div class="itembox">
          <span>异常</span>
          <span class="redtwo">{{ dataList.abnormal }}</span>
        </div>
      </div>
      <TablePaging
        :table-list="deviceList"
        border
        :table-column="deviceTableColumn"
        :table-buttons="deviceTableButtons"
        :table-btn-width="180"
        :table-paging="deviceTablePaging"
        :table-total="deviceTableTotal"
        @pagingChange="handlePaginChange"
      />
    </el-card>
    <device-update
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :before-close="() => (dialogVisible = false)"
      :handle-submit="handleModalSubmit"
      :form-data="modalFormData"
      :device-code-disabled="deviceCodeDisabled"
      width="620px"
      @responsibleAccountChange="handleResponsibleAccountChange"
    />
  </div>
</template>

<script>
import {
  fetchKpiFindPage,
  fetchKpiDepartAdd,
  fetchKpiDepartUpdate,
  fetchKpiDepartDelete,
  fetchKpiDepartGet,
  fetchKpiUpdateStatus,
  fetchGetPerformanceData
} from '@/api/indicatorlib/configuration'
import { TableSearch, TablePaging } from '@/components'
import DeviceUpdate from './update'
import { queryFormItem, tableColumn } from './config'
import {
  fetchCheckTopicDropdownList,
  fetchDataSystemDropdownList,
  fetchDictionaryList
} from '@/api/indicatorlib/department'
import { selectDeptList } from '@/api/common/commonDropDown'
export default {
  name: 'Exploitation',
  components: { TableSearch, TablePaging, DeviceUpdate },
  data() {
    return {
      dataList: {},
      queryFormData: {},
      queryFormItem: queryFormItem(this.handleDeptOnchange),
      deviceTableColumn: tableColumn(1, 10),
      deviceList: [],
      deviceTableButtons: [
        // 开发配置操作按钮
        {
          name: '编辑',
          click: this.handleEdit
        },
        {
          name: scope => (scope.row.status === 1 ? '停用' : '启用'),
          authKey: 'b_1_4',
          click: (id, row) =>
            this.handleUpdateStatus(id, row.status === 1 ? 2 : 1)
        },
        {
          name: '删除',
          confirm: '确认删除吗',
          click: this.handleDelete
        }
      ],

      deviceTableTotal: 0,
      deviceTablePaging: {
        page: 1,
        pagesize: 10
      },
      dialogTitle: '添加', // 弹窗标题
      dialogVisible: false, // 弹窗显示隐藏
      modalFormData: {
        defaultChart: 0
      }, // 弹窗表单数据
      deviceCodeDisabled: false // 设备号是否禁止修改
    }
  },
  mounted() {
    this.postStatisticalInfo()
    this.postFindPage()
    this.postDeptSearchList()
    this.postCheckTopicAllList()
    this.postDataSystemAlllist()
    this.postDictionaryList()
  },
  methods: {
    // 获取统计数据
    postStatisticalInfo() {
      fetchGetPerformanceData({}).then(res => {
        this.dataList = res
      })
    },
    // 获取查询部门下拉
    postDeptSearchList() {
      selectDeptList({ orgId: 0, type: 0 }).then(res => {
        console.log('1-->', res)
        this.queryFormItem[0].options = res.map(e => ({
          key: e.id,
          value: e.name
        }))
      })
    },
    handleDeptOnchange(e) {
      console.log(e)
      this.postCheckTopicAllList(e)
    },
    // 获取考核主题下拉
    postCheckTopicAllList(e) {
      console.log(e)
      fetchCheckTopicDropdownList({ deptId: e }).then(res => {
        this.queryFormItem[1].options = res.map(e => ({
          key: e.id,
          value: e.topic
        }))
      })
    },
    // 获取指标服务器下拉
    postDataSystemAlllist() {
      fetchDataSystemDropdownList({}).then(res => {
        this.queryFormItem[2].options = res.map(e => ({
          key: e.id,
          value: e.name
        }))
      })
    },
    // 获取数据系统下拉
    postDictionaryList() {
      fetchDictionaryList({ groupName: '数据系统' }).then(res => {
        this.queryFormItem[3].options = res.map(e => ({
          key: e.id,
          value: e.name
        }))
      })
    },
    formatArr(str) {
      if (!str) {
        return []
      }
      return str.split(',')
    },
    handleQuery(values) {
      // 查询点击
      this.queryFormData = values
      this.deviceTablePaging = {
        page: 1,
        pagesize: 10
      }
      this.postFindPage()
    },
    handleUpdateStatus(id, status) {
      // 更新状态
      this.postUpdateStatus(id, status)
    },
    handleAdd() {
      // 新增
      this._setModalData()
    },

    handleEdit(id) {
      // 修改
      fetchKpiDepartGet({ id }).then(res => {
        console.log(id)
        console.log('mm----------------')
        res.responsibleAccountIds = this.formatArr(res.responsibleAccountIds)
        res.responsibleAccountNames = this.formatArr(
          res.responsibleAccountNames
        )

        this._setModalData('修改', true, res)
      })
    },
    handleResponsibleAccountChange(res) {
      this.$set(
        this.$data.modalFormData,
        'responsibleAccountIds',
        res.orgList.map(e => e.id)
      )
      this.$set(
        this.$data.modalFormData,
        'responsibleAccountNames',
        res.orgList.map(e => e.name)
      )
    },

    handleDelete(id) {
      this.postKpiDepartDelete(id)
    },

    handleModalSubmit(values) {
      // 弹窗表单提交

      values.responsibleAccountIds = values.responsibleAccountIds.join(',')
      values.responsibleAccountNames = values.responsibleAccountNames.join(',')

      if (values.id) {
        this.postDeviceUpdate(values)
        return false
      }
      this.postKpiDepartAdd(values)
    },

    handlePaginChange(pageInfo) {
      // 分页改变
      this.deviceTablePaging = pageInfo
      this.postFindPage()
      const { page, pagesize } = pageInfo
      this.deviceTableColumn = tableColumn(page, pagesize)
    },
    handleResponsibleAccountIdsChange(e) {
      this.$data.modalFormData = {
        ...this.$data.modalFormData,
        responsibleAccountIds: e.map(e => e.name).join(','),
        responsibleAccountIds_array: e
      }
      // this.$data.modalFormData.responsibleAccountIds =
      // this.$data.modalFormData.responsibleAccountIds_array = e
    },

    _setModalData(title = '添加', visible = true, formData = {}) {
      // 设置弹窗
      this.modalFormData = formData
      console.log(this.modalFormData)
      this.dialogTitle = title
      this.dialogVisible = visible
      this.deviceCodeDisabled = title !== '添加'
    },
    postFindPage() {
      // 获取列表
      fetchKpiFindPage({
        ...this.queryFormData,
        ...this.deviceTablePaging
      }).then(res => {
        const { records, current, size, total } = res
        this.deviceList = records
        this.deviceTablePaging = {
          page: current,
          pagesize: size
        }
        this.deviceTableTotal = total
      })
    },
    postUpdateStatus(id, status) {
      // 更新状态
      console.log(status)
      fetchKpiUpdateStatus({ id, status }).then(() => {
        this.$message.success('操作成功')
        this.postFindPage()
      })
    },
    postKpiDepartAdd(values) {
      // 设备新增
      fetchKpiDepartAdd(values).then(res => {
        this.dialogVisible = false
        this.$message({
          type: 'success',
          message: '添加成功'
        })
        this.postFindPage()
      })
    },

    postDeviceUpdate(values) {
      // 设备更新
      fetchKpiDepartUpdate(values).then(() => {
        this.dialogVisible = false
        this.$message({
          type: 'success',
          message: '修改成功'
        })
        this.postFindPage()
      })
    },

    postKpiDepartDelete(id) {
      // 设备删除
      fetchKpiDepartDelete({ id }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.postFindPage()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-page {
  min-height: 0;
}
.table {
  position: relative;
  margin-top: 16px;
  min-height: 200vh;
  .el-button {
    position: absolute;
    top: 15px;
    right: 30px;
  }
  .theader {
    display: flex;
    margin-bottom: 20px;
    .itembox {
      text-indent: 20px;
      color: #8d8d8d;
      font-weight: 400;
      font-size: 16px;
      &:first-child {
        text-indent: 0px;
      }
      .green {
        color: #52c41a;
      }
      .orange {
        color: #ffbf00;
      }
      .redone {
        color: red;
      }
      .redtwo {
        color: red;
      }
    }
  }
}
</style>
